<template>
  <div>
    <van-nav-bar title="新增地址" left-arrow @click-left="GOback" placeholder fixed :border="false" />
    <van-form @submit="onSubmit(AddressDataObj.address)">
      <van-field v-model="username" placeholder="请填写您的姓名" :rules="[{ required: true, message: '请填写您的姓名' }]" />
      <div class="choose_sex">
        <section>
          <span class="choose_option" v-for="(item,index) in text" :key="index">
            <svg :class="IDindex==index?' icon1':'' " aria-hidden="true" ref="icon_pay" @click="check(index)">
              <use xlink:href="#icon-selectfill"></use>
            </svg>
            <span>{{item.sex}}</span>
          </span>
        </section>
      </div>
      <van-field v-model="AddressDataObj.address" placeholder="小区/写字楼/学校等" :rules="[{ required: true, message: '请填写小区/写字楼/学校等地址' }]" @click="jump" />
      <van-field v-model="DetailedAddress" placeholder="请填写详细送餐地址" :rules="[{ required: true, message: '请填写详细送餐地址' }]" />
      <van-field v-model="phone" placeholder="请填写手机号" :rules="[{ required: true, message: '请填写正确手机号' }]" />
      <van-field v-model="standbyPhone" placeholder="备用手机号(选填)" :rules="[{ required: true, message: '请填写正确手机号' }]" />
      <van-field v-model="tag" placeholder="无/家/学校/公司" :rules="[{ required: true, message: '请填写正确标签' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">新增地址</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      tag: '',
      tag1: 2,
      IDindex: 0,
      IDindex1: 0,
      username: '',
      // 地址
      // AddressRou: '',
      // 详细地址
      DetailedAddress: '',
      // 手机号
      phone: '',
      // 备用
      standbyPhone: '',
      text: [
        { sex: '先生', id: 1 },
        { sex: '女士', id: 2 }
      ]
    }
  },
  computed: {
    ...mapState(['AddressDataObj'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    async onSubmit(address) {
      const id = window.sessionStorage.getItem('user_id')
      if (this.IDindex == 0) {
        this.IDindex1 = 1
      } else {
        this.IDindex1 = 2
      }
      if (this.tag === '家') {
        this.tag1 = 2
      } else if (this.tag === '学校') {
        this.tag1 = 3
      } else {
        this.tag1 = 4
      }
      const { data: res } = await this.reques.post(`v1/users/${id}/addresses`, {
        address: address,
        address_detail: this.DetailedAddress,
        geohash: '30.528133,114.351121',
        name: this.username,
        phone: this.phone,
        tag: this.tag,
        sex: this.IDindex1,
        poi_type: 0,
        phone_bk: this.standbyPhone,
        tag_type: this.tag1
      })
      if (res.success === '添加地址成功') {
        this.GOback()
      }
    },
    // 跳转至搜索地址
    jump() {
      this.$router.replace('/user/info/address/add/addDetail')
    },
    check(index) {
      this.IDindex = index
    }
  }
}
</script>

<style lang="less" scoped>
.icon1 {
  fill: #4cd964 !important;
}
.choose_sex {
  padding-left: 0.7rem;
  background-color: #fff;
  section {
    border-bottom: 0.025rem solid #f5f5f5;
    display: flex;
    line-height: 2.5rem;
    border-top: 0.025rem solid #f5f5f5;
    padding-left: 2.5rem;
    .choose_option {
      font-size: 0.65rem;
      color: #333;
      display: flex;
      align-items: center;
      margin-right: 0.8rem;
    }
  }
}
.choose_sex section span svg {
  color: #ccc;
  margin: 0;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>